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Más autonomía digital y menos barreras 


Introducción 


Ensayos y experiencia sobre accesibilidad en la Fundación Karisma 


Desde la Fundación Karisma, estamos trabajando en nuestro sueño de 
lograr un mundo en el que los derechos humanos y la justicia social 
orienten el desarrollo y la implementación de las tecnologías. 


Para ello, sabemos que debemos buscar que todas las personas 
en igualdad de condiciones puedan acceder y usar la información, 
de modo que construyan libremente su criterio y puedan actuar 
autónomamente para avanzar hacia la democratización del 
conocimiento y la cultura. 


Esta guía básica es el producto de un ejercicio que se deriva de 
nuestros intereses y aprendizajes para transformar los obstáculos y las 
excusas que limitan el acceso y la autonomía digital de las personas, 

a partir de una de varias conceptualizaciones para abordar este tema, 
como es el modelo social de discapacidad. 


El modelo social de discapacidad nos invita a reconocer diversidad 
de condiciones que, al no ser atendidas, impiden el derecho a la 
educación, la información y la generación de conocimiento: 


. Barreras de accesibilidad: las que transitan las personas 
con discapacidad al interactuar con el entorno debido a la falta 
de mecanismos o soluciones de accesibilidad para garantizar la 
equidad. 


a] 








. Barreras situacionales: las que transitan las personas, por 
ejemplo, que no tienen acceso a internet, tienen poca señal en 
el servicio o atraviesan dificultades para acceder a su carga 
completa en tiempo oportuno; así como las que transitan las 
personas dependiendo del lugar en el que se encuentran. 


. Barreras de aprendizaje: aquellas que atraviesa una persona 
que, por diversos motivos, no tiene el mismo nivel de educación 
que otras*. 


Como parte de este reto, desde el equipo de comunicaciones, con 

el acompañamiento de dos personas expertas en accesibilidad, 
iniciamos a finales del año 2020 un ejercicio de investigación, mapeo 
y autoevaluación, combinado con una consulta pública sobre el 
análisis de accesibilidad en la navegación de nuestros contenidos; 
herramientas orientadas a reconocer las principales barreras que las 
personas tenían para su acceso y uso en nuestro sitio web y redes 
sociales, con el fin de realizar ajustes razonables y necesarios, a través 
de cuatro momentos principales: 


1.Diagnóstico: una primera indagación para diagnosticar el estado 
de las prácticas y necesidades de accesibilidad al interior del 
equipo de trabajo de comunicaciones de la Fundación Karisma, 
junto a la aplicación de una encuesta pública dirigida a personas 
con discapacidad y a nuestras audiencias en general, para 
conocer sus percepciones, deseos y necesidades sobre este tema 
en nuestros contenidos web y de redes sociales. 


2. Sistematización y análisis de la información. 


* Si bien las alternativas que se ofrecen en esta guía comprenden las tres barreras identifi- 
cadas (accesibilidad, situacional y de aprendizaje), es importante agregar que la mayoría se 
concentra en los aspectos relacionados con las barreras de accesibilidad. 


3. Elaboración de un informe con los principales hallazgos y 
recomendaciones para el equipo de comunicaciones. 


4. Implementación y testeo: comprende la capacitación básica 
para la implementación, verificación y sostenibilidad de los ajustes 
mínimos razonables aplicados a los contenidos actuales y futuros, 
así como la elaboración de esta guía básica de accesibilidad y 

el despliegue de acciones para continuar con el monitoreo y el 
reconocimiento activo de las necesidades y deseos de nuestras 
audiencias. 


Buscamos que el entusiasmo y el ensueño misional de Karisma 

de lograr un mundo en el que los derechos humanos y la justicia 
social orienten el desarrollo y la implementación de las tecnologías, 
evolucione siempre como resultado de la comprensión de las 
necesidades y deseos de nuestras audiencias y de nuestro trabajo 
articulado con ellas. 


Agradecemos y reconocemos el apoyo de Carolina Alfonso, que 
desde su papel como líder y par activa en discapacidad, accesibilidad 
y derechos humanos ha llegado a nuestro equipo; primero como 
consultora y ahora como integrante permanente, para profundizar 

en el contexto y en los diferentes escenarios de significación de la 
accesibilidad para todas las personas. ¡Gracias por su empeño y 
paciencia para ayudarnos a ver desde perspectivas diversas! 


Nuestro llamado a la acción es a seguir construyendo esta guía con el 
apoyo de otras personas, organizaciones, colectivos e instituciones que 
trabajan para promover HMásAutonomiaDigitalMenosBarreras, y nutrir 
este primer ejercicio de forma colaborativa. 


¡Esperamos que esta guía sea de utilidad para ustedes! 
Alejandra Martínez Hoyos 


Coordinadora de Comunicaciones 
Fundación Karisma 





Guía básica de accesibilidad 


Aspectos generales 
Objetivos de la Guía 
Objetivo general 


Facilitar pautas e información técnica y experiencial sobre el 
diseño e implementación de estrategias y buenas prácticas para 
el desarrollo de contenidos comunicativos más accesibles e 
incluyentes, para que todas las personas puedan acceder y usar la 
información en igualdad de condiciones, de modo que construyan 
libremente su criterio y pueda actuar autónomamente. 


Objetivos específicos 


* Compartir los conocimientos y las lecciones aprendidas que se 
generaron en el ejercicio de accesibilidad de la Fundación Karisma. 


+ Fomentar e impulsar una cultura de accesibilidad entre los equipos de 
trabajo de la Fundación Karisma. 


* Fomentar e impulsar una cultura de accesibilidad en otras 
organizaciones, colectivos y activistas que trabajen por el cuidado y la 
garantía de los derechos humanos de todas las personas. 


+ Alcanzar los requisitos básicos de accesibilidad contemplados por las 
Web Content Accesibility Guideline 2.1 (WCAG) en un esfuerzo para 
disminuir las brechas de acceso”. 


Más autonomía digital y menos barreras 


Hablemos sobre personas con 
discapacidad 


La Convención sobre los Derechos de las personas con discapacidad 
menciona y desarrolla un grupo de conceptos que son importantes para la 
implementación de la Guía de accesibilidad. 


La discapacidad puede interpretarse como la interacción entre las personas, 
con sus condiciones diversas, y las barreras del entorno, incluidas las 
actitudinales, que limitan la posibilidad de una participación plena y efectiva 
en la sociedad, en igualdad de condiciones con los demás. 


En palabras de Virginia Inés Simon, asesora sobre acceso a la información 
para personas con discapacidades que transitan barreras lectoras y consultora 
integrante del equipo de trabajo para la elaboración de esta guía: 


+ Entendemos que no hay una sola forma de hablar sobre discapacidad. 
Así, pueden haber posiciones encontradas al hablar sobre diversidad 
funcional, concepto que sigue focalizando la idea de discapacidad 
sobre la persona, como una forma de discriminación positiva de 
capacidad versus incapacidad. 


* Por otro lado, también comprendemos que desde el modelo social 
de discapacidad, estamos hablando de una construcción social: la 
discapacidad no se centra sobre las características de las personas, 
sino sobre las barreras que atraviesan, experimentan, del entorno y 
actitudinales. 


+ Hay personas que tampoco se sienten cómodas hablando de situación 
(la persona frente al contexto, lo relacional), condición (la situación de 
salud, el diagnóstico) o posición (estructural, cultural-política). 


+ Si bien existen diferentes maneras de comunicar sobre temáticas 
de discapacidad, de acuerdo con algunas reflexiones, debates y 








consensos internacionales, en esta guía, usaremos el concepto 
“persona con discapacidad”, ya que sobre este uso discursivo 
encontramos consenso general. (Comunicación personal, 15 de 
septiembre de 2021). 


¿En qué consiste la accesibilidad? 


En seguida hablaremos sobre los conceptos de ajustes razonables, 
accesibilidad universal y accesibilidad web, con el fin de facilitar la 
comprensión de esta guía. 


Ajustes razonables 


Son todas aquellas modificaciones y adaptaciones necesarias y adecuadas 
para garantizar a las personas con discapacidad el goce o ejercicio, en 
igualdad de condiciones con las demás, de todos los derechos humanos y 
libertades fundamentales y que no impongan una carga desproporcionada o 
indebida a quien hace los ajustes. 

Accesibilidad universal. 


Es la condición que deben cumplir los entornos, procesos, bienes, productos y 
servicios, así como los objetos, instrumentos, herramientas y dispositivos, para 
ser comprensibles, utilizables y practicables por todas las personas posibles 
en condiciones de seguridad y comodidad y de la forma más autónoma y 
natural que se pueda alcanzar, asumiendo estrategias del diseño universal, y 
cuando ello no sea posible, implementando los ajustes razonables necesarios y 
disponibles. 


Teniendo en cuenta que la Fundación Karisma se acoge a la legislación 
colombiana, a continuación, se define el concepto de accesibilidad aplicable a 
este contexto. 


Concepto de accesibilidad en Colombia. 


La accesibilidad hace referencia a las condiciones y medidas pertinentes que 
deben cumplir las instalaciones y los servicios de información para adaptar 

el entorno, productos y servicios, así como los objetos, herramientas y 
utensilios, con el fin de asegurar el acceso de las personas con discapacidad, 
en igualdad de condiciones, al entorno físico, el transporte, la información y las 
comunicaciones, incluidos los sistemas y las tecnologías de la información y las 
comunicaciones, tanto en zonas urbanas como rurales. Las ayudas técnicas se 
harán con tecnología apropiada teniendo en cuenta estatura, tamaño, peso y 
necesidad de la persona. (Ley 1618 de 2013 - Colombia) 
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Accesibilidad web 


Está orientada a promover y a realizar los ajustes necesarios para que las 
personas con discapacidad puedan percibir, comprender, navegar e interactuar 
por igual con los sitios web, aplicaciones, en entornos y herramientas digitales, 
a la vez que puedan realizar contribuciones en igualdad de condiciones, sin 
barreras que se lo impidan. 


¿Cuáles son los beneficios de implementar la accesibilidad web? 


Integrar los conceptos sobre accesibilidad universal, accesibilidad web y 
ajustes razonables a los procesos de trabajo para la ideación, creación, 
implementación y seguimiento de contenidos comunicativos, permitirá no 
solo a la Fundación Karisma sino a otras organizaciones de la sociedad 

civil, equipos de comunicaciones y en general, a todas las empresas o 
colectivos, impulsar las buenas prácticas y condiciones necesarias para que 
todas las personas posibles puedan acceder en igualdad de condiciones a 

los contenidos e información que crean y difunden, y al igual posibilitar la 
participación de todas las personas en las distintas charlas y actividades de la 
organización. 


Según datos de la Organización Mundial de la Salud (OMS), el 15 % de la 
población mundial experimenta alguna discapacidad, de modo tal que 
cualquier esfuerzo que se haga en los equipos de trabajo tendrá incidencia 
en el gozo de los derechos humanos y las libertades fundamentales como la 
autonomía, el acceso al conocimiento y a la cultura. 


Trabajar en los ajustes mínimos razonables también es un paso para cumplir 
con las disposiciones del Tratado de Marrakech, que representa mejoras en 
la calidad de vida y en la educación de toda la población, en especial de las 
personas con discapacidades. 


Tomando en cuenta la accesibilidad, la Fundación Karisma se acoge a leyes 
colombianas, más exactamente a la Ley estatutaria 1618 de 2013, por medio de 
la cual se establecen las disposiciones para garantizar el pleno ejercicio de los 
derechos de las personas con discapacidad. 
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El World Wide Web Consortium (W3C) y sus principios 


W3C es una comunidad internacional que está conformada por distintas 
organizaciones y por personas naturales que trabajan conjuntamente para 
desarrollar estándares web. 


Dentro de las distintas iniciativas en las que se trabajan dentro de la W3C, 

está la Web Accessibility Initiative o Iniciativa para la accesibilidad web 

(WAD, que tal como su nombre lo indica, tiene como objetivo velar y trabajar 
por la accesibilidad en la web. De dicha iniciativa surgen las Web Content 
Accessibility Guideline o Guías de contenido accesible web (WCAG) . 
Actualmente, sus principios también aplican a las redes sociales, aplicaciones y 
entornos digitales. 


¿Qué son las Web Content Accessibility Guideline (WCAG)? 


Son lineamientos que proporcionan un estándar compartido y único para la 
accesibilidad al contenido web, de modo que satisfagan las necesidades de las 
personas, organizaciones y gobiernos a nivel internacional. 


Para efectos de esta Guía, se considera la versión WCAG 2.1. Cabe mencionar 
que estas pautas se actualizan constantemente y su última actualización, la 
WCAG 2.2 está en proceso. 


Los lineamientos de la WCAG se organizan en cuatro principios que son: 
Perceptible, Operable, Comprensible y Robusto. Para mejorar el cumplimiento 
de estos principios, en inglés se creó el acrónimo POUR: 


Perceivable 
Operable 
Understandable 
Robust 


Las pautas de la WCAG 2.1 (también se pueden encontrar como (W3CAG) y 
serán la base principal para la Guía de accesibilidad de la Fundación Karisma. 


Conoce a profundidad toda la información sobre la WCAG 2.1 


Para finalizar este apartado, es recomendable que las acciones de 
accesibilidad sean pensadas como un proceso que hace parte del diseño de 
proyectos, acciones y estrategias comunicativas; así será más fácil y efectivo 
lograr la accesibilidad e inclusión. 
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Diseño de contenidos accesibles 


Los colores y la accesibilidad 
Los contrastes 


Las normas de WACG 2.1 sugieren que es fundamental tener en cuenta el 
contraste, porque ayuda a que personas con baja visión o algún tipo de 
daltonismo perciban mejor las imágenes y tengan una mejor lectura de los 
textos: 


Los índices de contraste del color son: 


+ Lapresentación visual de texto e imágenes de texto tiene una relación 
de contraste de, al menos, 4.5:1, excepto en los siguientes casos: Textos 
grandes: Los textos de gran tamaño y las imágenes de texto de gran 
tamaño tienen una relación de contraste de, al menos, 3:1. 


+ El mayor contraste de color se da entre el negro y el blanco y su relación 
es de la 21 (que se representa 1:21) 


Desde la Fundación Karisma, se estimula el uso de herramientas para medir 
el contraste de los contenidos y el sitio web: WebAim, Colorable y Colour 
Contrast Analyser (CCA). 





Desde programas como Photoshop o Illustrator también se puede hacer la 
conversión a escala de grises la pieza, esto permite revisar contrastes cuando 
hay dudas. 





Manejo del color 


La WCAG 2.1 establece las siguientes pautas como parte de los criterios para 
cumplir con el nivel A de accesibilidad: 


+ El color no se usa como único medio visual para transmitir la 
información, indicar una acción, solicitar una respuesta o distinguir un 
elemento visual. 


+ Enlos casos que sea importante conocer el color, este se debe 
mencionar de manera textual. 


Ejemplo 


Imagen de camisetas de colores y el color 
mencionado en texto 





¿Por qué tener en cuenta esta pauta? 


+ Es importante considerar que existen varios tipos de daltonismo, lo que 
hace que los colores se perciban de manera diferente, 


+ Las personas que son ciegas de nacimiento no tienen puntos de 
referencia para distinguir la diferencia entre los colores. 


* Laexposición a los rayos del sol o el hecho de ver algo a contraluz 
también hace que no se vean correctamente los colores e incluso que se 
tenga ceguera temporal. 


* Las condiciones técnicas de los distintos dispositivos desde los cuales se 
accede a los contenidos afectan también cómo se ven los colores. 


Accede a este artículo para conocer los tipos de daltonismo y algunas 
aplicaciones de apoyo que simulan la ceguera al color. 
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Herramientas sugeridas 


+ Color Blindness simulador gratuito para test de color web). 

. Color Oracle (Windows, Mac y Linux). 

+ Sim Daltonism (app para lOS y Mac). 

+ Adobe Color ofrece paleta para daltonismo que pueden personalizar. 














Recomendaciones 


Para mejorar la lectura y no crear un efecto visual difuso —entre las personas 
que tienen astigmatismo, principalmente —, se recomienda no usar colores 
absolutos (puros) para el negro sobre fondo blanco o viceversa. Los tonos que 
se pueden usar son: 


+ Color negro: 292929 o 4363636 
+ Color blanco: f4f4f4 


Esta medida permitirá reducir también la fatiga visual de las personas 
lectoras. 


Cuando se trabaja con colores RGB (también llamados colores luz o aditivos) 
se deben evitar los tonos que están muy cerca de los márgenes del espectro 
de color, es decir, verde fluorescente, magenta y celeste o cian. 


Conoce esta entrada de blog sobre astigmatismo y accesibilidad. 





* Siempre que se use el color rojo o verde, para simbolizar aprobación o 
desaprobación, es bueno colocar un signo que lo acompañe y se debe 
mencionar el color. De esta forma, se destacan los esfuerzos por alcanzar 
mecanismos de lectura fácil, siempre que ello sea posible” 


+ Esrecomendable usar texturas para marcar diferencias en las infografías, 
los mapas, los esquemas, además de tener una relación de 3:1 para el 
índice de contraste. 


+  Alusar líneas, se recomienda que estas tengan textura, diferente grosor o 
un patrón además del uso de color. 


+ Enlos programas de Adobe, como Illustrator o Photoshop, se puede dar 
textura a las líneas, ya sea modificando el patrón de ondulación de línea o 
haciéndola punteada. 


Guía básica de accesibilidad 


Ejemplo 


VARIACIONES DE LÍNEAS 








ÁS A a A a 


— o ———— 0 





Ml Ejemplos 


Imagen que representan los distintos tipos 
de líneas existentes. 
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Las imágenes 


A la hora de diseñar imágenes, iconos e ilustraciones los equipos de trabajo 
deben tener en cuenta la clasificación de estos elementos: informativa, 
funcional o decorativa, de texto, compleja, grupos de imágenes. y mapas de 
imágenes. 


Imágenes informativas 


Son aquellas imágenes que tienen como objetivo dar información relevante o 
complementaria a la información que se está escribiendo en texto dentro de 
un documento o un post para redes sociales. 


Como ejemplo se propone una publicación de la Fundación Karisma en su 
cuenta de Instagram. 


Q karismacol 


karismacol [Convocatoria Pasante de Derecho] 
Cierre: 10 de agosto de 2021 


Ingresa al enlace de nuestra bio y conocerás más 
información. 


*En Karisma valoramos las aplicaciones de mujeres y de 
personas con orientaciones sexuales e identidades de 


466.000 + ARL. Á género diversas, migrantes, pertenecientes a comunidades 
a ES, e Ny indígenas, afrocolombianas y raizales o con diversidades 
Medio tiempo. da funcionales. En tanto que en Karisma seguimos en 

cometes era pe modalidad de teletrabajo debido a la pandemia, personas 
Conrad fuera de Bogotá también pueden postular. 

aprendizaje o acuerdo 

de vinculación de z > Z ¿ 
acuerdo al programa "4 HPasantías HtDerechosHumanos +Derecho HColombia 


académico. 


Ver 1 comentario 


4 de agosto - Ver traducción 





En este ejemplo la imagen aporta información adicional que no está en el post 
de texto y al pasar el lector estas imágenes no tienen texto alternativo y eso 
conlleva a que se de una pérdida de información importante para personas 
con discapacidad visual. 


lle 
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Imágenes funcionales 


Son aquellas imágenes que en el momento en que una persona usuaria inte- 
ractúa con ellas se espera que obtenga como resultado una respuesta, es decir, 
que el rol de esa imagen es cumplir una función específica y generalmente no 
se acompaña de un texto visible que la mencione. 


Por ejemplo, el avión de Instagram, donde se cliquea para enviar un mensaje o 
el triángulo de play que permite reproducir videos o contenidos de audio. 


Nueva publicación | (y Comentarios 6) Reels 


CO) Notificaciones O ends 
y me gusta v iS 
(2 Chats DL] Guardar (2) Perfil 
(3 Buscar áN Home IMÁGENES FUNCIONALES 


Iconos Instagram 


(Imagen con todos los iconos que se muestran en la red social Insta- 
gram y con los cuales se puede interactuar) 


Imágenes decorativas 


Son aquellas imágenes que no transmiten información importante y están 
dentro del diseño como apoyo visual u ornamental. 


Pueden ser omitidas o eliminadas y en su descripción alternativa, se 


recomienda enfocarse en el enlace al que llevan, en caso de que sea una 
imagen con este tipo de interacción. 
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Como ejemplo se observa una imagen que acompaña una publicación en 
la web de la Fundación Karisma, la cual no se describe, pues su función es 
únicamente decorativa y no aporta información relevante para las personas. 


IN Mas 





(Imagen de referencia Una entrada web de Fundación Karis- 
ma) 


Saber la clasificación de las imágenes es fundamental para dar un adecuado 
manejo al texto descriptivo y etiquetado de dicha imagen, lo que permite 
que los lectores de pantalla lean correctamente la función de cada botón que 
representan estos iconos. 


Tener en cuenta la clasificación de imágenes antes y durante la elaboración 

de piezas gráficas es fundamental, ya que permitirá enfocarse mejor en el 
objetivo que se quiere alcanzar y la función que cumplen las imágenes que 
confirman el contenido para aportar al mismo; además, esto ayuda a optimizar 
las descripciones alternativas de cada imagen. 


Los logotipos por ser representativos de una marca, están 
exentos de cumplir la normativa de contraste de la WCAG 
2.1, aun así, deben ser perceptibles en todos los casos de 
uso. En el caso específico de la Fundación Karisma y de las 
demás organizaciones que usen esta guía como referente, es 
recomendable seguir los lineamientos de usos correctos del 
logotipo que indican sus manuales de identidad. 
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Imágenes de texto 


El texto legible a veces se presenta dentro de una imagen. Si el texto dentro 
de la imagen no hace parte de un logotipo, es mejor evitarlo. 


Sin embargo, si se utilizan imágenes que en su contenido tenga texto, el texto 


alternativo que describe dicha imagen debe contener las mismas palabras que 
están en ella. 


Recomendaciones 


para la reducción de 
violencias machistas 
contra periodistas y 
comunicadoras 





varisma (Imagen de una publicación de Fundación 
K Karisma que ejemplifica las imágenes de texto) 


Imágenes complejas 


Dentro de esta categoría se encuentran los gráficos y los diagramas, utilizados 
para transmitir datos o información detallada. En la descripción de la imagen 
se debe proporcionar un equivalente de texto completo de los datos o la 
información contenida en la imagen como alternativa de texto. 
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Ejemplo 


Promedio por eje 







1.1. Política de género 


1.2. Política de accesibilidad 








1.3. Informes de transparencia 





Fuente de imagen 
https: //web.karisma.org.co/donde-estan-mis-datos-2020/ 





Grupos de imágenes 


Si varias imágenes transmiten una sola pieza de información, la alternativa de 
texto para una imagen debe transmitir la información para todo el grupo. 


Ejemplo 


(Imágenes de publicaciones 
en el Instagram de Fundación 
Karisma que ejemplifica los 
grupos de imágenes) 





Mapas de imágenes 


La alternativa de texto para una imagen que contiene varias áreas en las que 
se puede hacer clic debe proporcionar un contexto general para el conjunto 

de enlaces. Además, cada área en la que se puede hacer clic individualmente 
debe tener un texto alternativo que describa el propósito o el destino del 


enlace. 


Ejemplo 


Democratización del 


conocimiento y la cultura 


e 





Autonomía y dignidad 
O 
Participación Civica 
O 
Inclusión Ni 
O 
K+LAB 
SEGURIDAD DIGITAL O 
Y PRIVACIDAD 
K- Apropiación Tecnológica 
(Captura del sitio web de Fun- 
compar a capaciddos de dación Karisma que ejemplifica 
o) los mapas de imágenes) 


Conoce más detalles sobre la clasificación de las imágenes 





Más autonomía digital y menos barreras 


Las descripciones de imágenes 
y el texto alternativo 


En cuanto a las imágenes hay dos maneras de hacer su 


descripción: 


Descripción de imagen 


Es la descripción que está debajo de 
una imagen —lo que se conoce como 
pie de foto— y es legible a simple 
vista, tanto para personas que pueden 
ver como para los lectores de pantalla 
que usan las personas ciegas. 


Tiene el mismo propósito que el texto 
alternativo: brindar una descripción 
escrita de una imagen para las 
personas, los lectores de pantalla y los 
motores de búsqueda. 


Permite dar la información suficiente 
para contextualizar las imágenes 

en relación con el contenido de esa 
entrada web. 


Se recomienda su uso, para los videos 
o reels que se suben en Instagram, ya 
que para este tipo de contenido no se 
permite usar el texto alternativo 


Se utiliza cuando las redes sociales 
tienen programadores automáticos de 
contenido y no permiten agregar texto 
alternativo para las imágenes. 


En Twitter se coloca un hilo de trinos, 
cuando la descripción de imagen tiene 
mucho contenido para resaltar. 


Texto alternativo 


El texto alternativo no se ve, pero sí 
va incrustado dentro de las imágenes, 
es leído por los lectores de pantalla 

y los motores de búsqueda. Ayuda 

a los buscadores a clasificar y dar 
información de las imágenes dentro 
de los sitios web, para asociarla con el 
contenido de la página. 


Su objetivo es describir la información 
de la imagen; en caso de que la 
imagen sea botón, este texto describa 
su función. 


Además de ser importante para los 
lectores que usan las personas ciegas, 
el texto alternativo puede ser útil 
cuando por diversos motivos una 
imagen no carga correctamente. 


Se recomienda utilizarlo en todas las 
redes sociales, cuando hay límite de 
caracteres (como el caso de Twitter 
O los títulos) y se requiere usar ese 
espacio en el post para información 
importante. 


También se recomienda utilizarlo 

en las imágenes de los newsletter 
(Boletines de noticias) que se usan en 
Email Marketing. 
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Fuente original: 
https://www.instagram.com/p/CECsJsEjrT9/?utm_medium=copy_ link 





En español: Fue traducido por DALAT (Desarrollo Accesible Latinoamericano) 


Para entender mejor la manera correcta de utilizar y aprovechar el texto 
alternativo, se sugiere leer la entrada de blog “Texto alternativo: la guía 
definitiva”, escrita por Silvia Marqués, una experta en accesibilidad web. 





También se puede consultar el árbol de descripciones alternativas, por medio 
de preguntas, ayuda a identificar si el contenido debe acompañarse de texto 
alternativo. 





Buenas prácticas 


En el siguiente listado se resumen algunas buenas prácticas para el uso de tex- 
to alternativo: 


+ Antes de describir una imagen, siempre se debe aclarar cuál es su propósi- 
to y si aporta información importante como valor agregado al objetivo del 
post en general. 


+ Sila respuesta a la pregunta “¿la información de la imagen ya se explica en 
el texto del post?” es positiva, esa imagen no debe ser descrita. 


+ Es mejor describir en el texto del post los carretes de imágenes en Insta- 
gram. 


+ Haga descripciones de entre 120 y 125 caracteres para texto alternativo. 


+ Se deben evitar el uso de expresiones como Imagen sobre o Imagen de en 
los textos alternativos, pues el lector de pantalla ya brinda este contexto 
por sí solo. Se deben ofrecer tantos detalles sobre la imagen como sea po- 
sible, manteniendo la precisión. 


N 
O) 





Más autonomía digital y menos barreras 


Documentos y tipografía 
accesibles 


Este lineamiento aplica tanto para documentos en formato .doc o PDF, como 
para todos los contenidos de un sitio web en cada una de las páginas que lo 
componen, ya que cuando, las personas amplíen el texto, esto afectará las 
proporciones de tablas, imágenes y demás contenidos de las páginas. Por 
esto se busca que no se pierdan las proporciones, como mínimo si se amplía al 
doble de su ancho y alto. 


En primer lugar se debe tener en cuenta nivel AA, el criterio de cumplimiento 
1.4.4 Cambiar el tamaño del texto: a excepción de los subtítulos y las imágenes 
del texto, el texto se puede cambiar de tamaño sin tecnología de asistencia 
hasta en un 200 % sin pérdida de contenido o funcionalidad. 








¿Qué hace que un documento sea accesible? 


Al aplicar los siguientes cuatro aspectos básicos, en cualquier tipo de 
documento se garantiza que todas las personas reciban la misma información: 


Los documentos legibles deben permitir la búsqueda de palabras 

para ser interpretados por lectores de pantalla. Esto se logra gracias al 
reconocimiento óptico de caracteres (OCR, por sus siglas en inglés). Es 

por ello que, al digitalizar, escanear o crear obras en formatos digitales, se 
utilice el formato PDF con capacidad de búsqueda. Se puede realizar una 
comprobación rápida intentando copiar y pegar una porción de texto y en 
un bloc de notas, para verificar también cómo se vuelcan los caracteres y si 
requieren de correcciones internas de metadatos. 


2. El orden de importancia de los títulos debe identificarse fácilmente por 
medio de jerarquías (del nivel 1 al 6). 


* Es importante utilizar el texto alternativo en las imágenes que están 
dentro del documento, para que los dispositivos de apoyo también 
puedan aplicar la búsqueda de imágenes. 





3. Los documentos deben ser legibles para personas que pueden ver y así 
leerlos por sí mismos, por esto se deben elegir cuidadosamente los tipos 
de letra. Se sugiere la tipografía Atkinson Hyperlegible. También se debe 
comprobar que los colores seleccionados tengan suficiente contraste 
(contraste mínimo = 3:1 y contraste óptimo = 4.5:). 


4.Los documentos deben ser comprensibles. Se debe utilizar un lenguaje 
claro y sencillo, adecuado al público al que se quiere dirigir y al propósito 
(objetivo) que se busca lograr con estos documentos. 


A la hora de redactar un documento se recomienda: 


+ Siaún después de usar un lenguaje sencillo se debe usar lenguaje 
técnico que pueda ser difícil de entender, se debe incluir un glosario de 
términos. 


+ Dentro de los párrafos, la longitud de cada renglón (línea) no debe 
superar los ochenta caracteres. Así, se facilita la lectura tanto para 
personas como para dispositivos de apoyo. 


+ Para las personas con diversas condiciones visuales, el uso de párrafos 
justificados a cada lado puede provocar que al cambiar de renglón se 
pierdan y así se salten partes del texto. Esto también hace que queden 
espacios en blanco muy grandes entre palabras. 


+ Para quienes usan el modo de lectura de izquierda a derecha, se 
recomienda utilizar párrafos con alineación hacia la izquierda, lo que 
permitirá que las personas sepan que la parte justificada (alineada) es 
el inicio de la línea y puedan llevar mejor el hilo del texto al recordar 
dónde termina el renglón anterior. 


+ Se deben emplear tipografías de uso común, ya que la mayoría de 
personas están familiarizadas con ellas y reconocen con facilidad los 
distintos caracteres. Se deben evitar las fuentes manuscritas o de 
estilo artístico, así como caracteres poco comunes, porque no siempre 
son de lectura fácil. Si el proyecto requiere una tipografía especial, 
se recomienda utilizarla para textos cortos o destacados y usar una 
tipografía complementaría de menor complejidad para el texto corrido. 


. Serecomienda usar tipografías planas o redondas, como lo son las 
fuentes Sans Serif, a excepción de las fuentes Arial y Helvética, puesto 
que para personas con algún tipo de dislexia provocan confusiones de 
similitudes entre letras y con el número 1. 
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+ Aunque se recomienda no usar letras en cursiva o negrilla, la sugerencia es 
restringir su uso a pasajes específicos que requieran énfasis. 


+ Enel momento de usar listas numeradas o con viñetas, se recomienda dejar 
mayor espacio entre el fin y el inicio de cada uno, para generar descanso al 
leer. 


+ Para hacer los listados hay dos opciones; usar números y viñetas. Los 
números se deben usar solo cuando los elementos de la lista deben estar 
en orden consecutivo y cuando no, se utilizan viñetas. 


En este video sobre documentos accesibles, se describen más características 
que se deben tener en cuenta para este tipo de documentos y la manera de 
comprobarlas en Word. 





* Enel video anterior se recomienda como mínimo un interlineado de 1.5. 


+ Enprogramas de diseño editorial como InDesign se recomienda seguir el 
patrón de >2 puntos (pt), es decir que si se está trabajando con una fuente 
de 10 pt, el interlineado debe tener mínimo 12 pt. 


Como complemento a estas recomendaciones, se encuentra la 
entrada de blog: Diseño Contenido Accesible: Tipografía, Estilo de 
Fuente y Estructura, la cual trae ejemplos adicionales. 








¿Cómo diseñar documentos 
PDF accesibles? 


En una entrada reciente a su blog, Olga Carrera, especialista en accesibilidad, 
trata sobre Buenas prácticas en InDesign para generar PDF accesibles. Allí, 
aparte de algunas recomendaciones que, ya mencionadas en esta guía, agrega 
otras que son muy útiles a la hora de diagramar el contenido que se convertirá 
en PDF. También tiene un video sobre archivos PDF correctamente etiqueta- 
dos desde inDesign. 
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Guía básica de accesibilidad 


Contenidos multimedia 


Llegar a las personas a través de un conjunto de imágenes, sonidos y textos 
simultáneos, unidos a través de diferentes transiciones, ofrece la posibilidad de 
que las personas puedan sortear, por ejemplo, sus dificultades para ver, para 
escuchar y para entender. 


Si son planeados con un enfoque de accesibilidad desde el inicio de cada 
proyecto comunicativo, los contenidos multimedia son uno de los recursos 
más poderosos para superar las barreras de accesibilidad, situacionales y de 
aprendizaje. 


Uno de los aprendizajes del equipo de comunicaciones de la Fundación 
Karisma es la importancia de hacer adaptaciones que garanticen a las 
personas el derecho a elegir cómo acceder a la información según su 
preferencia. Por ejemplo, los subtítulos en un video ayudan tanto a las 
personas con discapacidad como a aquellas que necesitan acceder a este 
formato, por experimentar barreras situacionales (las que transitan las 
personas, por ejemplo, que no tienen acceso a internet, tienen poca señal en el 
servicio o atraviesan dificultades para acceder a su carga completa en tiempo 
oportuno; así como las que transitan las personas dependiendo del lugar en el 
que se encuentran). 


Directriz 1.2 de las WCAG 2.1 sobre Medios basados en el tiempo 


Para favorecer la posibilidad de que la mayoría de las personas, pese a convivir 
con una o varias barreras para el acceso, pueda usar y disfrutar los contenidos 
multimedia (video, audio o animaciones), pregrabado o en vivo, las WACG 

sugieren tener disponible: transcripciones, subtítulos o descripciones de audio. 


(Aquí solo mencionaremos criterios de nivel A y AA, que Fundación Karisma 
puede poner en práctica y que sugerimos a otras organizaciones). 


+ Ofrecer transcripciones o descripciones de audio para cada vídeo o 
audio pregrabado (criterio 1.2.1, nivel A) 





. Proporcionar subtítulos para el contenido de audio pregrabado 
(criterio 1.2.2, nivel A) 
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. Ofrecer subtítulos para el contenido en vivo (criterio 1.2.4, nivel AA) 





* Para las animaciones, bien sea dentro de un video o en un GIF, se debe 
tener en cuenta la siguiente recomendación de la directriz 2.3 sobre Con- 
vulsiones y reacciones físicas que pueden ocasionarse al publicar conteni- 
do multimedia: 


* Directriz 2.3.1 de las WACG 2.1. Tres destellos o por debajo del umbral 
(Nivel A) los sitios web, videos o GIF, entre otros, no deben contener nada 
que parpadee más de tres veces en el lapso de un segundo y si existe un 
destello, este debe de estar por debajo del umbral de destello general y 
de luz roja. 





Para mayor comprensión de este criterio se puedes acceder a esta publicación 
que analiza el umbral de tres destellos y esta que habla del caso de Pokemon y 
los destellos 














Recomendaciones para subtítulos 
y transcripciones 


Es importante ofrecer transcripciones en texto plano, para audio y video, así 
que puedan ser leídas por tecnologías de apoyo (ejemplo: teclado Braille) so- 
bre todo en plataformas donde el video o audio no se pueda detener fácilmen- 
te (es el caso de Instagram con sus videos cortos). 


.  Lastranscripciones son literales y se usan principalmente para dar 
una alternativa de texto al contenido de solo audio y así facilitar que 
personas con audición reducida o sordas puedan acceder al contenido. 


+  —Lossubtítulos más accesibles son los Subtitling for the Deaf and 
the Hard ofHearing (SDH) o subtítulos para personas sordas en los 
que, aparte de describir las voces o sonidos principales, se incluye la 
descripción de la música o los sonidos ambiente. Este video sobre 
subtítulos descriptivos explica con más detalle el tema. 
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Las charlas TED (TED Talks, en inglés) son un buen ejemplo de la 
combinación de subtítulos y transcripción de audio, tanto en el idioma 
original del video, como en otros idiomas (ejemplo: TED Talks sobre las 





discapacidades y los derechos) 





Se recomienda hacer los subtítulos en una fuente Sans Serif, con un 
puntaje entre 12 y 14 puntos. 


Se recomiendan subtítulos centrados, máximo 32 caracteres por línea 
y solo dos líneas por cada subtítulo. 


Se recomienda usar una letra blanca sobre una caja negra, que tenga la 
opacidad al 80 %. 


Los subtítulos deben ubicarse en la margen inferior central del video 

y no deben tapar en ningún momento gráficos o textos importantes 
que salgan en el video. Por ejemplo, Netflix coloca los subtítulos arriba 
al inicio de una película, mientras en el video aparecen nombres del 
elenco u otros títulos 


En lo posible se recomienda usar subtítulos cerrados (que van aparte 
del video), que es la opción que ofrecen YouTube o Netflix, puesto que 
permite que las personas usuarias puedan adaptar con características 
de color y tamaño de forma personalizada. Esta sugerencia es 
especialmente útil en caso de que existan personas con baja visión y a 
su vez son de apoyo para personas sordas o con audición reducida. 


Accede a Comparación subtítulos abiertos y cerrados 





El subtitulado automático no es recomendable, ya que da lugar a 
muchos fallos de transcripción. Si se usa como material de apoyo, 
luego debe hacerse una corrección manual exhaustiva. 


Para sincronizar y editar los subtítulos se puede usar Aegisub, un 
software gratuito para subtitular y pueden ver el video tutorial de 


Aegisub. 





YouTube cuenta con una opción para activar subtítulos automáticos 
en las transmisiones en vivo. Esto todavía es un reto para otras 
redes sociales, pero en este video con consejos para subtitulado o 
transcripción en vivo, se dan algunas opciones donde se mencionan 
varias formas de hacerlo, incluso con el dictado por voz de Google 
Docs. 
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Los GIF 


* Los GIF no son un formato muy amigable en lo que a accesibilidad se 
refiere, por lo que siempre se debe elegir, en lo posible, otro formato 
para transmitir la información de un GIF, por ejemplo, el de video. 


+ Encaso de tener que usar los GIF hay que verificar que no tengan 
parpadeos o destellos más de tres veces en un segundo (Umbral de 
tres destellos) 





* Permitir que el GIF se detenga después de 5 segundos. 


. Ofrecer la posibilidad de que las personas lo puedan pausar cuando 
quieran. 


* Colocar descripción alternativa. 


+ SielGiIF lleva subtítulos largos o textos largos y tiene una duración 
igual o menor a 15 segundos, los textos pasan demasiado rápido y 
las personas con baja visión u otras barreras de lectura pueden no 
alcanzar a leer el texto, lo cual dificulta su comprensión. 
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Redes sociales más incluyentes 


Recomendaciones generales 


Para enlazar contenidos desde las redes sociales, se aconseja usar un 
acortador de URL y darle un nombre a dicho enlace, el cual haga referencia a 
lo que se encontrará al dirigirse allí. 


Ejemplo: 


O Fundación Karisma ... 


http://bit.ly/ ResistenciaDigitalK ¡Hoy TomaCulurall 


(así como ya lo está aplicando Ka risma) La protesta en las calles, como la protesta en 
digital son medios legítimos de manifestación 
social. En los dos espacios tu seguridad, 
integridad y derechos deben ser protegidos 
¡Eso tenlo seguro! Si pasas por % Héroes hoy 
sábado ¿119 ¡Hablemos! Tenemos tipos y 
material para ti y tu parche. 
http://bit.ly/ResistenciaDigitalK 





AS 
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VA ADO 
(Imagen de una publicación de Fundación IN A 'h INN A i 


Karisma que ejemplifica el modo adecuado 
de colocar un enlace en redes sociales) 





+ Se deben evitar expresiones como Clic aquí, En el siguiente enlace o 
Acceda a esta URL para denominar los enlaces, ya que no dejan claro 
su propósito o lo que se puede encontrar al acceder a ellos. 


+ Para los hashtags se debe utilizar la letra inicial de cada palabra en 
mayúscula, ejemplo: HMovilizaciónSocial, para facilitar que los lectores 
de pantalla que son usados por personas ciegas o con baja visión 
identifiquen cada palabra y de esta manera las lean correctamente. 





Más 
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+ Siempre que se empleen cifras, además de escribirla en número, se 
sugiere hacerlo en letra, por ejemplo: 190 (ciento noventa) personas. 
Así, ayudará a quienes tienen dislexia numérica y a que los lectores de 
pantalla de las personas ciegas los puedan leer claramente. 


+ Enla sección de diseño dentro de esta guía, se encuentran el manejo 
de las imágenes y cómo describirlas y las pautas allí mencionadas 
también se deben aplicar al contenido para redes sociales o el sitio 
web 


ORDEN DE LECTURA SEGÚN LOS LECTORES DE PANTALLA EN REDES SOCIALES 


8:52 
App Store 
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Anuncio importante 
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La protesta en las calles, como la protesta en digital son La EACConstitucional sí seleccionó la 
medios legítimos de manifestación social. En los dos 4 

espacios tu seguridad, integridad y derechos deben ser tutela de 4 mujeres que fueron 
protegidos ¡Eso tenlo seguro! Si pasas por P Héroes obligadas a descargar t++CoronApp 


hoy sábado 119, ¡Hablemos! Tenemos tips y materia para abordar vuelos nacionales y sin 
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(Las imágenes de arriba tienen como propósito, mostrar el orden de lectura que 
emplean los lectores de pantalla, para leer los post en las distintas redes sociales) 


Es importante tener en cuenta cómo leen los lectores de pantalla, para 
diagramar la información importante de los post de redes sociales de manera 
clara y en orden de importancia. 





Las funcionalidades de accesibilidad en cada red social 


A continuación, se presentan algunas rutas e indicaciones para acceder y 
aprovechar las funciones de accesibilidad de diferentes redes sociales como 
Instagram, Facebook, Twitter, YouTube, Archive y GIPHY. 


Instagram 


Se pueden conocer 

las características de 
accesibilidad de Instagram 
desde su centro de ayuda. 


Para hacer testeos con 

el lector de pantalla se 
recomienda usar el lector 
integrado del dispositivo 
móvil, bien sea Apple 

o Android, ya que esta 
red está pensada para 
ser aprovechada desde 
smartphones (teléfonos 


inteligentes) y también 
ofrece indicaciones para 
computadores. Conoce 
cómo puedo usar un lector 
de pantalla para Instagram. 








Instagram solo permite 
editar texto alternativo 

en imágenes y se puede 
Conocer cómo edito el texto 


Facebook 


En su centro de ayuda está 
la sección de accesibilidad 
para Facebook, donde 
ofrece distintos recursos 

y Uso de características 
para ser aprovechadas 

en la red social y página 
de Facebook sobre 
noticias de accesibilidad, 
adicionalmente existe la 
cuenta en Twitter sobre 
fallos de accesibilidad de 
Facebook, donde reportan 
novedades y mejoras sobre 
el tema dentro de sus redes. 














Facebook permite editar 
texto alternativo en su sitio 
web para computador y 

las apps de Android y lOS, 
pero solo para imágenes, 
pero en videos y GIF no está 
permitido hacerlo. Cómo 
editar texto alternativo en 





alternativo de una foto en 


Facebook 





Instagram en su centro de 
ayuda. 
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Twitter 


Twitter cuenta con un centro 
de ayuda donde se puede 
buscar por tema los asuntos 
de accesibilidad, la cuenta 
oficial de Accesibilidad es (Y 





TwitterAllY 


Permite descripción de 
imágenes y a los GIF 
colocarles texto alternativo, 
incluso, tanto en un post 
como en un Fleets (historias 
de Twitter) permite hacer 
esto utilizando tecnología de 
asistencia (por ejemplo, con 
lector de pantalla NVDA). 
Cómo publicar imágenes 





accesibles en Twitter. 





Hay dos formas de poner 
subtítulos en vídeos o GIF, 
puede hacerlo insertando los 
por su cuenta antes de subir 
el contenido multimedia. 
Subir los subtítulos en 
archivo SRT al contenido 
multimedia desde la 
biblioteca de Media Studio. 
Cómo cargar un archivo de 
subtítulos en Twitter. 
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Conoce cómo subir un video 





a IGTV en Instagram, por 
ahora solo genera subtítulos 
automáticos en IGTV y 
Reels, que se activan antes 
de publicar en configuración 
avanzada. 





Los otros videos que se 
suben como posts es mejor 
si se incrustan directamente 
antes de subirlos. 


YouTube 


Google cuenta con un 
centro de ayuda para 
YouTube muy completo que 
incluye algunos temas de 
accesibilidad. 





YouTube tiene un menú de 
accesibilidad dentro de sus 
apps para Android (tiene 
más funciones disponibles) 
y lOS. Accesibilidad en 

la app de YouTube para 
dispositivos móviles. 

Los subtítulos se crean 
desde YouTube Studio y se 
puede conocer en cómo 
agregar o crear subtítulos 
para YouTube, y Cómo 
Editar o eliminar subtítulos, 
en su web de ayuda. 


























Más 


a 


Facebook 


En cuanto a los subtítulos, se 
pueden agregar o eliminar 
de los videos y editar sus 
características, esta función 
sólo se puede hacer desde 
computadores. Cómo 
agrego o elimino subtítulos 
en un video en Facebook 








Para las historias se debe 
subtitular antes de subir el 
video y usar audio descrip- 
tivo directamente cómo se 
grabó el de la campaña de 
HMásAutonomíaDigital 
MenosBarreras 








Archive.org 


Lamentablemente Archives. 
org tiene poco desarrollado 
el tema de accesibilidad 

en su web, por lo cual dan 
limitadas características 
específicas de apoyo. 


En cuanto al apoyo de 
personas ciegas o con 

baja visión, reconocen 

que hay problemas de 
compatibilidad con algunos 
lectores de pantalla. 


Lo que sí se aclara es que 
su web es accesible para la 
mayoría de personas con 
dificultades de aprendizaje. 


y Fririr Mia Limit A rriar c FA AIVrAarac 
autonomía digital y menos barreras 


Twitter 


En el centro de ayuda se 
puede conocer las funciones. 
de accesibilidad de los 
Twiter Spaces, como los 
subtítulos en vivo y su 
lectura por los lectores de 
pantalla. 





Antes de hablar sobre 
GIPHY, se debe tomar en 
cuenta 


GIPHY en su centro de 
ayuda no trata directamente 
temas relacionados con la 
accesibilidad, con lectores 
de pantalla ni textos 
alternativos, pero ofrece 
Guías de cómo hacer un GIF 
y allí como subtitular en su 
GIF Maker. 

Prácticas recomendadas 
para la creación de GIF 














Guía 





Ca de accesit 


YouTube 


Al subtitular una transmisión 


en vivo se solicitan 

unos requisitos para los 
subtítulos de eventos 

en vivo en YouTube y se 
habla de softwares que 
son compatibles con su 
plataforma, para realizar 
esta tarea. 











También ofrece: 


Consejos para crear un 


archivo de transcripción. 


Traducir los propios 
títulos y descripciones 
de vídeos. 








Consejos para crear un 





archivo de transcripción. 





Google recomienda 
algunos servicios de 
terceros que trabajan 
en accesibilidad con 
herramientas para 
subtitulación. 





Archive.org 


En el sitio web de Archive, 
se puede leer lo que sería 
su actual declaración de 
accesibilidad (Acceso para 
personas con discapacidad 





- Información general). 
Allí ofrecen los formatos 
accesibles que tienen 
disponibles, en libros y 
contenidos de texto, para 





personas con discapacidad. 


También algunas 
herramientas de apoyo. 


Se recomienda que al 
subir un archivo dentro 
de Archive.org, se ofrezca 
el mismo contenido en 
PDF accesible, videos 
subtitulados y con 
audiodescripciones. 
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En el caso de Texto 
alternativo no se ofrece 
hacerlo directamente en 
su plataforma (Twitter por 
esto pone texto alternativo 
a GIP). 

Se sugiere usar buenas 
etiquetas que expliquen 

a qué hace referencia la 
imagen o las emociones 
que se expresan en el GIF, 
pues esas etiquetas y el 
título de la imagen es lo 
único que se leerá con un 
lector de pantalla. Prácticas 
recomendadas para crear 
etiquetas en GIPHY 











Más autonomía digital y menos barreras 


Ejemplos de publicaciones accesibles en algunas redes sociales 


Facebook 


Para comprender mejor el siguiente ejemplo, los lectores pueden ingresen a la 
configuración de accesibilidad de su teléfono y activar el lector de pantalla (en 
Android es TalkBack y en lOS o Mac es VoiceOver). 


Ejemplo publicación con varias imágenes en Facebook 





Video ejemplo de uso de subtítulo en Facebook 

Este es un ejemplo sencillo con el que se puede comenzar e ir mejorando 
al adicionarle un color distinto cuando hablan sus personas al tiempo (para 
diferenciarlas) 





Instagram 


Ejemplo Publicación de video en Instagram con subtítulos automáticos (para 
ver los subtítulos vaya a la configuración de su cuenta en Instagram, sección 
cuenta y busque subtítulos) 

Ejemplo de publicación accesible en Instagram 








Twitter 


Ejemplo publicación de Twitter accesible con lectores de pantalla. 





Aunque en Twitter los videos no siempre están subtitulados, este Video con 
subtítulos incrustados es un buen ejemplo. Se aconseja agregar un recuadro 
de fondo negro a los subtítulos para que se lean más fácil y no se pierda el 
contraste en partes del video. 





Buenas prácticas en Historias (Stories) y transmisiones En Vivo en redes 
sociales 


Por el momento la mejor manera de hacer las historias más accesibles en 
las redes sociales es a través del audio de descripción de lo que se ve en el 


sE, 


contenido y agregando subtítulos si contiene contenido de audio o al subir 
un video, que esté ya tenga los subtítulos incrustados. Ejemplos: historia con 
audiodescripción más texto y video con subtítulos incrustados 








Por ahora, solo YouTube y Facebook cuentan con la opción de subtitulado 
automático, para eventos en vivo (esta opción se configura antes de iniciar 

la transmisión). Para videollamadas a través de Meet, Teams y Zoom, existen 
estas opciones para quienes están en la llamada, pero es de aclarar que 
pueden darse errores en la transcripción, ya que son características en 
desarrollo y algunas veces no reconocen correctamente las palabras que 
hablan las personas en la transmisión en vivo (por motivos técnicos o las 
personas usan varios idiomas a la vez y también por la dicción de quien habla, 
entre otros). 


Si no se cuenta con recursos para adquirir un software o servicio de 
subtitulado en vivo, se sugiere usar las siguientes herramientas de 
transcripción en vivo. 








Más autonomía digital y menos barreras 


Recomendaciones generales 


Esta sección de la guía contiene PDF, artículos, ejemplos de fragmentos 

de código y videos de referencia con conceptos e información técnica que 
pueden aclarar cómo planear e implementar buenas prácticas y herramientas 
para hacer accesibles los sitios web. 


A continuación se encuentra un listado de herramientas de apoyo para cumplir 
los criterios de accesibilidad para sitios web de la W3C 


* Guía de referencias rápidas con estándares WCAG 2.1. Esta guía permite 
hacer la búsqueda por filtros según el criterio, nivel de conformidad y tema 
específico, entre otros, que queramos consultar a la hora de aplicarlo al sitio 
web o contenido en redes. 





+ Este resumen busca facilitar la puesta en práctica de las pautas de nivel A 
al AAA. Checklist con las pautas de accesibilidad para contenido y diseño 





Consulta: Libro “Accesibilidad web. WCAG 2.1 de forma sencilla” 





Entender cómo funcionan las tecnologías asistidas dentro de los sitios web 
permitirá comprender las barreras de accesibilidad de la página web que 
administra cada equipo. El video sobre tecnologías de apoyo y características 
de una web accesible: 








+ Dentro del video mencionado arriba, ver el fragmento sobre ¿Cómo 
diseñar y mantener una web accesible? desde el minuto 59:40 del 
video y algo a destacar, es la importancia de tener un gestor de 
contenido (CMS- Content Management System, por sus siglas en 
inglés) que sea accesible. 
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Guía básica de accesibilidad 


La estructura del sitio web 


Al estructurar sitios web, es muy importante que además de cumplir las 
directrices ya mencionadas a lo largo de esta Guía, se cumpla con la Directriz 
13 - Adaptable de las WACG 2.1, de modo que se cree contenido que se pueda 
presentar de diferentes formas (por ejemplo, un diseño más simple) sin perder 
información o estructura. 


Desarrollar un contenido bien estructurado ayudará a tener una mejor 
experiencia de usuario dentro del sitio web. En este videotutorial ¿Cómo se 
estructura una página web? Se explica el uso adecuado de tecnologías HTML y 
WAI-ARIA 1.1. para conseguir una web más accesible. 





A continuación se listan algunos de los beneficios de una buena estructura 
de la página web para las personas que por sus características diversas se 
enfrenten a barreras de acceso: 


+ Las personas con discapacidades cognitivas y de aprendizaje pueden 
encontrar y priorizar más fácilmente el contenido de la página. 


+ Las personas que usan lectores de pantalla pueden saltar directamente al 
contenido principal y navegar a las secciones que son importantes para 
ellas. 


+ Las personas usuarias de teclado pueden navegar por las páginas y sus 
secciones de manera más eficiente. De lo contrario, deben presionar la 
tecla de tabulación varias veces para navegar por todos los enlaces en 
cada sección. 


+ Las personas que utilizan software que solo muestra el contenido 
principal de una página web, como las personas con discapacidades 
cognitivas, obtendrán mejores resultados si la estructura de la página está 
correctamente marcada. 
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Más autonomía digital y menos barreras 


+ Las personas con discapacidad visual, incluidas las personas con baja 
visión, tienen señales que proporcionan orientación en la página y en el 
contenido. 


+ Las personas usuarias de la web móvil a menudo tienen acceso a un 
modo llamado “lector” o “lectura” que solo mostrará el contenido 
principal de la página si está correctamente marcado. 


+ Las personas que usan ciertos complementos del navegador pueden usar 
roles de referencia para saltar a secciones específicas de una página. 


Desarrollando la web desde el HTML5 


A continuación, se explican los lineamientos de la WCAG 2,1 para hacer 
sitios web más accesibles desde el código (que sea perceptible, operable 
comprensible y robusta), con énfasis en cómo mejorar la navegación. 


Directriz 2.4 - Navegable 


+ Sedeben proporcionar formas de ayudar a las personas usuarias a 
navegar, encontrar contenido y determinar dónde se encuentran. 


+ Para hacer que una página web sea navegable y por ende sea accesible 
desde su desarrollo, es fundamental trabajar desde la escritura correcta 
de su código fuente HTML 5, su estructuración y el etiquetado de los 
componentes, entre otros aspectos, que se explican más claramente en 
el video de introducían al desarrollo de código accesible (ver desde el 
minuto 8: 22). 





. Aprende sobre accesibilidad y practica en código fuente de la web con 
W3Schools 





En busca de hacer más accesible el contenido dinámico y controles que se 
desarrollan en lenguajes HTML o en JavaScript, entre otros, la WC3 creó 
las especificaciones de ARIA (WAI!-ARIA 1.0 - Web Accessibility Initiative - 
Accesible Rich Internet Applications) 





En el video de HTML semántico y fundamentos de atributos ARIA se hace una 
recorrido introductorio sobre los temas más destacados para trabajar dentro 
de la estructura de la web y su HTML. También se explican algunos de los fallos 
más comunes y buenas prácticas en AMY (acrónimo de Accessibility). 

La experta en accesibilidad Olga Carreras explica que la WAI-ARIA permite 
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transmitir a las API de accesibilidad información sobre el comportamiento de 
la interfaz y su estructura, de manera que esta información pueda ser utilizada 
por los productos de apoyo para la interacción con el usuario final. 


Para entender más a profundidad las especificaciones ARÍA se recomienda 
leer los siguientes artículos: 


« Guía WAI-ARIA. Introducción, referencias, ejemplos, herramientas de 
Olga Carreras. 





+ Ejemplo de uso de roles y atributos WAI-ARIA estáticos 





El mapa de sitio web 


Como su nombre lo indica, un mapa de sitio muestra la estructura completa de 
un sitio web mediante enlaces de texto que llevan a cada página y que buscan 
representar la estructura, según la jerarquía y los niveles de encabezado (del 1 

al 6), así como los contenidos que están dentro de cada página. 


Constituye el criterio 2.4.5: Múltiples formas dentro de las pautas de 
accesibilidad para el contenido web, que consiste en proporcionar medios 
para ayudar a las personas a navegar y encontrar contenido en formas que se 
adapten a sus necesidades. A la vez, el mapa de sitio web es una forma ágil 
de informar a los motores de búsqueda cuáles son las páginas que se pueden 
rastrear dentro de un sitio web. 





Puede ser un archivo XML que enumera las URL de un sitio junto con metada- 
tos adicionales acerca de cada una de ellas. Es posible consultar el SiteMaps, 
para realizar mapas de sitio. 





Algunas herramientas de apoyo son: 


Comprobador de mapas del sitio XML. 





Validador de sitemaps XML a su vez permite comprobar si el mapa de 
sitio cumple correctamente con los estándares para este protocolo. 





Creador de mapas de sitios de manera visual, con esta herramientas 
se puede estructurar el mapa de un sitio web y al tiempo visualizar la 
estructura del mismo. 





Más autonomía digital y menos barreras 


Roles y foco 


Criterio 2.4.3 Orden de enfoque (Nivel A): Para lograr que las personas puedan 
hacer una lectura clara y coherente de los elementos ubicados en el sitio web, 
esta debe poderse navegar de forma ordenada y secuencial de modo que 
cada componente reciba el enfoque necesario y tenga un significado claro 
para las personas. 





Silvia Márquez quien trabaja en accesibilidad Web, creó una publicación de 
Instagram sobre ¿Qué es el foco en la navegación Web? y su estructura, como 
se muestra en la siguiente imagen: 





(Imagen de una publicación de Silvia 
Márquez, muestra cómo se marca el 
foco en un elemento web y cuál es el 


CO elemento que toma 








Criterio de cumplimiento 2.4.7 Enfoque visible (Nivel AA): cualquier interfaz 
de usuario operable por teclado tiene un modo de operación en el que el 
indicador de enfoque del teclado es visible. 





Tener en cuenta el orden de lectura del sitio web es fundamental, para que 
coincida con el orden de lectura que utilizan los lectores de pantalla y el orden 
de navegación por comandos de teclado Video explicativo sobre orden de 
navegación (Ver desde min 10:48) 





Es muy importante definir y etiquetar los roles de cada componente 
correctamente para que el lector de pantalla indique ¿qué acción tendrá 
asociada? ¿cuál es el comportamiento esperado o la acción y/o resultado que 
se espera conseguir al interactuar con cada componente. Conoce más detalles 
en ¿Cómo diseñar los roles de los componentes más accesibles? 
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Titulación de las páginas 


Criterio 2.4.2 Página titulada (Nivel A): las páginas web tienen títulos que 
describen el tema o el propósito. 





La intención de este Criterio de Conformidad es ayudar a las personas usuarias 
a encontrar el contenido y orientarse en él, asegurando que cada página 

web tenga un título descriptivo. Los títulos señalan la ubicación actual sin 
requerir al usuario que lea o interprete el contenido de la página. Cuando el 
título aparece en los mapas de sitio o una lista de resultados de búsqueda, 

las personas usuarias pueden identificar más rápidamente el contenido que 
necesitan. 


. Leercomprobación de accesibilidad en títulos de la página. 





+ El encabezado de nivel 1 es muy importante, ya que es el que le da el 
título a cada una de las páginas que tiene un sitio web A su vez permite 
que este nombre sea leído por los lectores de pantalla, para así poder 
identificar lo que se espera encontrar en cada página. En ese sentido, 
por cada página del sitio solo se debe tener un encabezado de nivel 1. 
Lecturas técnicas recomendadas: Tratamiento de títulos de página con 
React. 





Las etiquetas y los encabezados 


Criterio 2.4.6 Encabezados y etiquetas (Nivel AA): los encabezados y las 
etiquetas describen el tema o el propósito. 





Al estructurar el sitio web hay que tomar en cuenta el uso de encabezados 
dentro del sitio web y su orden, ya que estos permitirán una navegación 
coherente, al hacerlo con lectores de pantalla y aplicar los atajos de teclado 
y los encabezados van del nivel 1 al 6, los cuales generan el orden de los 
contenidos de cada página de la web. En Google Docs esto son llamados 
títulos de nivel uno y títulos de nivel seis. 
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. Losencabezados dentro de las páginas de la web deben estar 
etiquetados correctamente (como se explica en la sección anterior 
(Titulación de las páginas) y no solo con características visuales usando 
negrilla, fuentes más grandes o cambio de color, puesto que no son fáciles 
de identificar por los lectores de pantalla, ni al navegar por comandos de 
teclado. Leer comprobación de encabezado accesibles. 





+ Contenido de apoyo Niveles de encabezados en componentes 
reutilizables. y Etiquetas, atributos y estilos HTML, CSS 








Como métodos de comprobación se utiliza la comprobación automática, 
que es más usada para detectar errores en el código HTML de la web, y la 
comprobación manual con lectores de pantalla u otras tecnologías de apoyo. 
Además, se puede acudir al testeo de personas con distintas discapacidades. 


Olga Carrera recomienda usar la herramienta de recolección de datos Audit 
Tools WCAG2.1 que se obtienen de las revisiones manual y automática de los 
criterios de la W3C para la accesibilidad de un sitio web. 








Menú de navegación 


Según la W3C el uso de los menús se da principalmente para facilitar la 
navegación y para proporcionar funcionalidades que son partes críticas de la 
operatividad de la página web. 


Las barras de navegación y sus submenús deben ser operables tanto por 
Morse, como por teclado y deben ser leídas por tecnologías de apoyo, como lo 
son los lectores de pantalla. 


Para comprender mejor este tema, se sugiere leer: 
* Conceptos de menús web y su importancia. 


* Hacer menús web accesibles. 
+ Video Creación de menú responsive. 











A/ 


Los carruseles 


Según la W3C y sus directrices las buenas prácticas para un carrusel 
AMY (acrónimo de accessibility) son: 


Las personas usuarias deben poder pausar el movimiento del carrusel 
porque puede ser demasiado rápido o distraer, lo que dificulta la lectu- 
ra del texto. 


Todas las funciones, incluida la navegación entre elementos del carru- 
sel, deben poder utilizarse con el teclado. 


Los cambios en los elementos del carrusel deben comunicarse a todos 
las personas usuarias, incluidas las de lectores de pantalla. 


Verificar que la posición del teclado (“foco”) se gestiona de forma ra- 
zonable y comprensible. 


Si el carrusel pasa las imágenes automáticamente deberían detenerse 
por sí mismo después de 5 segundos. 


La entrada web Conceptos de carrusel amplía el manejo que se debe 
dar a las galerías dentro de un sitio web. 





Las entradas web 


Básicamente se debe cumplir con los criterios ya mencionados y con algunos 
otros como: 


Se debe asignar un título (HD) a la entrada web y dividir correctamente 
la información a través de encabezados y párrafos para dar coherencia 
y orden claros. 


Seguir las mismas pautas de los documentos en PDF, pero dando el 
formato desde el gestor de texto del propio sitio web. 


¿Cómo hacer una imagen accesible en Wordpress? Usar descripción 
de imagen o texto alternativo, teniendo en cuenta el objetivo de dicha 
imagen dentro del conjunto de la entrada web. Artículo Cómo hacer 
imágenes accesibles en WordPress 








+ Usar párrafo de máximo 6 líneas y para términos de difícil comprensión, 
colocar un glosario o describir entre paréntesis. 
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.  Seaconseja usar el texto alineado a la derecha para que no haya grandes 
espacios en blanco entre palabras. 


Los enlaces 


Criterio 2.4.4 Propósito del enlace (en contexto) (Nivel A): el propósito de 
cada enlace se puede determinar a partir del texto del enlace solo, o del 
texto del enlace junto con su contexto de enlace determinado mediante 
programación, excepto cuando el propósito del enlace sea ser ambiguo para 
las personas usuarias en general. 





Sus propósitos: 


* La intención de este criterio de cumplimiento es ayudar a las personas 
usuarias a comprender el propósito de cada enlace (enlace significativo) 
para que puedan decidir si lo quieren seguir. 


+ Latecnología de asistencia tiene la capacidad de proporcionar a las 
personas usuarias una lista de enlaces que se encuentran en la página 
web. 


+ El texto de enlace significativo también ayuda a aquellas personas que 
desean pasar de un enlace a otro. 


+ Losenlaces significativos ayudan a las personas usuarias a elegir qué 
enlaces seguir sin requerir estrategias complicadas para comprender la 
página. 


+ Losenlaces siempre deben ir subrayados, puesto que permiten que las 
personas que perciben el color de manera diferente, puedan identificar 
que es un enlace, aunque no vean su color distinto al resto del contenido 
en texto. 


+ Al igual que para los enlaces de redes sociales, para los enlaces que 
van dentro de las entradas web o documentos. se deben responder las 
siguientes preguntas: ¿a dónde se dirige el enlace? ¿qué acción se espera 
que se haga? 


+ Se aconseja no utilizar palabras clic aquí o ver más, tampoco direcciones 
como URL abreviadas sin un nombre que las identifique. 


« Publicación sobre enlaces en sitios web 





GUla DasSica ae accesibilidad 
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Los formularios 


Los formularios accesibles, bien etiquetados, que buscan ser ordenados y no 
demasiado largos, benefician a todas las personas, con y sin discapacidad. 
Tutorías completo de formularios accesibles de la W3C y Video resumen de 
formularios web accesibles 








En lo posible, los formularios no deben estar sujetos a un límite de tiempo 
para permitir que las personas usuarias completen el formulario a su ritmo. 

Si es necesario establecer un límite de tiempo, por ejemplo, por razones de 
seguridad, la persona usuaria debe tener la opción de apagarlo o extenderlo. 
Esta restricción no se aplica si el límite de tiempo se debe a un evento en vivo, 
como una subasta o un juego, o si el tiempo para completar el formulario es 
esencial para una presentación válida. 


Algo que representa una gran barrera al completar formularios y hacer 
transacciones bancarias, son los límites de tiempo para efectuarlas. La W3C en 
las WCAG 2.1 recomienda: 


Los captcha y las comprobaciones de identidad aún siguen representando 
distintas barreras de acceso para todas las personas, en especial aquellas 
con discapacidad, pero algo que se debe tener en cuenta es brindar varias 
opciones (visuales, auditivas, entre otras) para que las personas puedan 
comprobar su identidad. 


Lecturas de apoyo: 


* Inaccesibilidad de CAPTCHA. 

+ Barreras de las nuevas formas de validación de identidad. 

+ Olga Carreras (experta en accesibilidad) creó en 2015 el artículo Captcha y 
la W3C. 
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Herramientas de apoyo 


En esta sección de la guía se enlistan algunas de las infinitas herramientas y 
recursos que están disponibles para hacer comprobaciones de accesibilidad 
tanto del sitio web, como a la hora de crear los contenidos. 


Glosario de herramientas 

AChecker: es una herramienta sencilla que puede utilizar para probar la 
accesibilidad de su contenido HTML. Para ello, puede elegir uno de estos tres 
métodos: 


Adobe Color ofrece paletas para daltonismo que pueden personalizarse. 





Audit Tool: es un documento Excel que está diseñado por Olga Carreras y 
que ayuda a hacer el testeo de cumplimiento e incumplimiento de las pautas 
de accesibilidad de la WCAG 2,1 con gráficas y tablas de resumen para los 
informes. 


Axe: es un conjunto de herramientas para comprobación de accesibilidad en 
sitios web, que cuenta con extensiones para Chrome y Firefox. 


ally: es un validador de accesibilidad de contraste de color que le ayuda a 
probar si su sitio o aplicación web cumple con las pautas WCAG 210 no en 
términos de contraste de color. 


Colorable: permite comprobar el contraste según la combinación de colores 
que se quiere utilizar. 


Color Blindness: simulador de daltonismo, gratuito para test de color web. 
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Color Oracle: es un simulador de daltonismo gratuito para Windows, Mac 
y Linux. Ayuda a diseñar teniendo en cuenta el daltonismo al mostrarle en 
tiempo real lo que verán las personas con algún tipo de daltonismo. 





Figma plugins de accesibilidad: complementos que ayudan a comprobar las 
características de accesibilidad en Figma. 





Figma plugin contraste de color: complementos que ayudan a comprobar los 
niveles de contraste del color en Figma. 





Háblalo App: es una aplicación gratuita desarrollada por Asteroid Technologies 
para ayudar a aquellas personas con dificultades para comunicarse 
verbalmente y con problemas de audición, convierte la voz a texto o viceversa, 
siendo útil para transcripción simultánea. 





Jubler: es una herramienta de código abierto, para editar subtítulos basados 
en texto. Se puede utilizar como software de creación para nuevos subtítulos 
o como una herramienta para convertir, transformar, corregir y refinar los 
subtítulos existentes. Video tutorial de uso. 





NonVisual Desktop Access (NVDA): es un lector de pantalla portátil gratuito, 
de código abierto para Microsoft Windows, se suele usar en los tests de 
accesibilidad web. Video tutorial NVDA 








Photosensitive Epilepsy Analysis Tool (PEAT): esta herramienta de análisis de 
epilepsia fotosensible de Trace Center, es un recurso descargable y gratuito, 
para que las personas desarrolladoras puedan identificar los riesgos de 
convulsiones que puedan generar su contenido web y en softwares. 





Sim Daltonism: app para lOS y Mac que permite comparar los colores según 
los distintos tipos de ceguera al color. 





Subtitle Edit: editor de código abierto para subtítulos de video, es compatible 
múltiples formatos, también ofrece traducción automática apoyada en Google 
Translate, entre otras características. 





Validadores de Accesibilidad y usabilidad: en esta entrada de su blog, Olga 
Carreras hace un listado muy completo de las herramientas para testeo web 





manual o automático, SEO, documentos PDF y de manejo del color, entre 
otros. 

WAVE: conjunto de herramientas para evaluación que ayuda a hacer que los 
contenidos web sean más accesibles para las personas con discapacidades. 
Permite identificar muchos errores de accesibilidad y relacionarlos con el 
cumplimiento de las Pautas de accesibilidad al contenido web (WCAG), facilita 
la evaluación manual del contenido web. 


WC3Schoo!: sitio web que ofrece tutoriales y cursos para accesibilidad desde 
el desarrollo de código. 





WebAim: esta web además de ofrecer la herramienta para verificar el 
contraste entre colores, tiene herramientas para realizar testeo automático de 
accesibilidad, talleres, tutoriales y apoyo técnico sobre accesibilidad. 


Wizard: formulario online (creado por Olga Carreras), basado en el mapa de 
decisión, el cual guía, según el tipo de imagen, su contexto y su función, hasta 
llegar a una página de resultado final, con ejemplos, recursos y técnicas a usar 
en ese caso concreto. 





-cesibilidad 
cesibilidad 


Recomendaciones para eventos 
presenciales 





+ Es importante tener en cuenta que el lugar del evento sea un espacio 
que permita el acceso con rampas o ascensores para que personas con 
movilidad reducida puedan desplazarse lo más autónomamente posible y 
contando con el espacio suficiente para quienes recorren el lugar en sillas 
de ruedas. También se debe verificar que los baños y cafeterías del lugar 
sean accesibles para todas las personas. 


+ Para los ingresos se debe disponer de una fila preferencial que permita 
agilizar el ingreso de personas mayores o con discapacidad. 


+ De ser posible se sugiere asignar a algunas personas para que apoyen 

y guíen a personas con discapacidad o adultos mayores durante todo el 
evento. En Colombia, instituciones con el Centro de Rehabilitación para 
Ciegos (CRAC) ofrecen capacitaciones y apoyo, para enseñar cómo guiar 
a personas con discapacidad, como lo son la ceguera o baja visión. 


* En caso de que los eventos se lleven a cabo en un auditorio, deben 
destinarse las primeras filas para las personas con discapacidad y adultos 
mayores. 


* De ser posible se debe contar con el apoyo de un intérprete de lengua 
de señas. En el caso de Colombia, si el evento es con alguna entidad 
distrital o estatal, muchas de estas cuentan con dichos intérpretes. 


* Los contenidos audiovisuales deben subtitularse, ya que esto permitirá 
que el contenido sea comprendido mejor por todas las personas. 


*» De ser posible, se debe ofrecer la opción de entregar memorias 
del evento con adaptaciones de accesibilidad, que se podrá acordar 
personalmente con aquellas personas asistentes que lo requieran; se 
recomienda hacer una encuesta al final. 


+ En esta lista de organizaciones que apoyan a las personas con 
discapacidad, se encuentran algunas organizaciones en Colombia con sus 
nombres y contactos, que son de utilidad para solicitar asesoría al hacer 
tanto eventos presenciales como en virtuales, esta últimos más accesibles 
para este colectivo. 
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Conclusiones 


1. Avanzar en proyectos y procesos de accesibilidad genera beneficios 

para todas las personas sin distingo de condiciones y, a su vez, mejora 
significativamente la calidad y el impacto social de la labor que se adelanta 
a corto, mediano y largo plazo. 


2. Para implementar procesos de accesibilidad, no es necesario disponer de 
grandes recursos económicos, estos se pueden adelantar con herramientas 
y consejos sencillos como los expuestos en esta Guía. 


3. Generar una cultura de accesibilidad al interior de cada organización 

es un proceso que depende del consenso y compromiso de todas las 
personas y equipos de trabajo. También requiere de su planeación, 
creatividad, recursividad y constante actualización. La validación, evaluación 
y ajuste constante de las nuevas experiencias, acciones y herramientas es 
fundamental para lograr consolidar esta cultura. 


4. El compromiso para adoptar dispositivos, estrategias y mecanismos de 
accesibilidad encaminadas a reducir las brechas de acceso no siempre se 
encuentra al alcance de las posibilidades de nuestras organizaciones. 


* Por lo anterior, cuando se abordan las disposiciones de accesibilidad 
como un todo, ante la necesidad urgente de información en un momento 
dado (por ejemplo, el Paro Nacional en Colombia), o por falta de recursos 
técnicos, humanos, económicos, siempre se dispondrá del compromiso 
ético y del sentido de responsabilidad social, en aras de brindar opciones 
de ajustes razonables. 


* Además, con la implementación de estas herramientas se están 
garantizando y cumpliendo el ejercicio de los derechos de las personas 
con discapacidad para el acceso a la información y a las comunicaciones. 


al 
ul 








Guía básica de accesibilidad 


Referencias bibliográficas 


ATIY Lab. (2021, mayo 20). Post de Twitter accesible. 
Twitter. https://twitter.com/allylab/status/1395514797362487299?s=21 


AY Perú. (2020, septiembre 02). Imágenes decorativas e informativas. 
Instagram. https://www.instagram.com/p/CEqF59RphYt/ 


AY Perú. (2020, noviembre 06). Pautas para ser más accesibles con WhatsApp. Instagram. 
https: //www.instagram.com/p/CHQoJZVpcLt/?utm_medium=copy_link 


AY Perú. (2020, agosto 04). Definición Imágenes funcionales. integras. 
https: //www.instagram.com/p/CDfVklIdh4un/ 


AY Perú. (2021, marzo 26). Texto de links descriptivos en sitios web. 
instagram. https://www.instagram.com/p/CM5sFRaJgO1/?utm_medium=copy_link 


Aitchison, S., Lincoman, M., Soria, A. M., 8 olcese, F. (s.f.). Niveles de encabezados en componentes 
reutilizables. Collectednotes.com/DALAT. 
https://collectednotes.com/dalat/niveles-de-encabezados-en-componentes- 
reutilizablesHniveles-de-encabezados-en-componentes-reutilizables 


Aitchison, S., Lincoman, M., Soria, A. M., 8 Olcese, F. (s. f.). Tratamiento de títulos de página con 
React. Collectednotes.com/DALAT. 
https://collectednotes.com/dalat/tratamiento-de-titulos-de-pagina-con-react 


Aranda, J. (2021, octubre 21). Cómo hacer imágenes accesibles en WordPress. https://wpnovatos. 
com/imagenes-accesibles-twitter-wordpress/ 


Archive org. (2019). Acceso para discapacitados - Información general. archive.org. 
https://help.archive.org/hc/en-us/articles/360026244752-Disability-Access-General- 
Information 


Area tecnológica. (s. f.). Tipos de linea en dibujo técnico. www.areatecnologia.com. 

https: //www.areatecnologia.com/dibujo-tecnico/tipos-de-lineas-en-dibujo-tecnico.html 

BBC News Mundo. (2019, junio 24). ¿Cómo ven las personas daltónicas? Las apps que te permiten 
mirar el mundo como si tuvieras ceguera al color. 

BBC News Mundo. https: //www.bbc.com/mundo/noticias-48744787 


Camacho, M. P. (2021, abril 08). ¿Banana con cubiertos? Instagram. 
https: //www.instagram.com/tv/CNakl5mhiEV/?utm_medium=copy_link 


Cárdenas Jiménez, A., 8 Ministerio de Salud y la Protección Social. (2017, junio). Ley 1618 de 2013. 
minsalud.gov.co. https: //www.minsalud.gov.co/sites/rid/Lists/ 


BibliotecaDigital/RIDE/DE/PS/documento-balance-1618-2013-240517.pdf 


ul 
O) 


Carreas, O. (2007, septiembre 07). WAI-ARIA. Introducción, referencias, ejemplos, herramientas. 
olgacarreras.blogspot.com. 
https://olgacarreras.blogspot.com/2007/09/wai-aria-introduccion-referencias. 


Carreas, O. (2007, diciembre 17). Captchas y la W3C. Olgacarreras.blogspot.com. 
https://olgacarreras.blogspot.com/2007/11/captchas-y-la-w3c.html 


Carreras, O. (2013, noviembre 07). PDF accesible. PDF correctamente etiquetado desde inDe- 
sign. Youtube. Retrieved junio, 2021, from 
https: //youtu.be/SEzogrAAO_Y 


Carreras, O. (2020, octubre 04). Etiquetas, atributos y estilos HTML / CSS que no debes usar o 
debes usar bien. 

https://olgacarreras.blogspot.com. https://olgacarreras.blogspot.com/2020/10/etiquetas-atri- 
butos-y-estilos-html-css.html 


Carreras, O. (2021, marzo 22). Buenas prácticas en InDesign para generar PDF accesibles. olga- 
carreras.blogspot.com. 
https://olgacarreras.blogspot.com/2021/03/buenas-practicas-en-indesign-para.html 


Consorcio World Wide Web. (s. f.). W3C MISSION. 
https: //www.w3.org. https://www.w3.org/Consortium/mission.html 


Consorcio World Wide Web. (2018, junio 22). Introducción a las Pautas de Accesibilidad para el 
Contenido Web (WCAG). 
https: //www.w3.org. https://www.w3.org/WAl/standards-guidelines/wcag/es 


DALAT (Desarrollo Accesible Latinoamericano). (2020, septiembre 15). DALAT Desarrollo Acce- 
sible Latinoamericano. Instagram. 
https: //www.instagram.com/p/CFLMrRUg7PU/?utm_medium=copy_link 


DALAT (Desarrollo Accesible Latinoamericano). (2020, septiembre 16). Pokemon y Accesibili- 
dad. Instagram. 
https: //www.instagram.com/p/CFN422¡AVYR/ 


DALAT (Desarrollo Accesible Latinoamericano). (2020, octubre 15). Hack para transcribir audio 
en directo por Internet. Youtube. 
https: //www.youtube.com/watch?v=xKpipTSGv3c 


DALAT (Desarrollo Accesible Latinoamericano). (2020, agosto). Astigmatismo y Accesibilidad. 
https://collectednotes.com/dalat. 
https://collectednotes.com/dalat/astigmatismo-y-accesibilidad 


DALAT (Desarrollo Accesible Latinoamericano). (2021, julio 12). Historia en Instagram con des- 
cripción de voz. Instagram. 
https: //www.instagram.com/stories/highlights/18096109459251445/ 


DALAT (Desarrollo Accesible Latinoamericano). (2021, abril 30). ¿Qué podemos diseñar accesi- 
ble ademas del color? Facebook. 


https: //www.facebook.com/543497646050033/posts/1392485574484565/?d=n 


DALAT (Desarrollo Accesible Latinoamericano). (2021, abril 30). ¿Qué podemos diseñar accesi- 
ble, además del color? segunda parte: roles de los componentes. Instagram. 
https: //www.instagram.com/p/COSratGsdF8/?utm_medium=copy_link 


Deafnology. (2019, marzo 6). Subtítulos Abiertos y Cerrados: Open Captions(OC), Closed Cap- 
tions (CC). Youtube. 
https: //www.youtube.com/watch?v=GH5Xj¡MPAS 


Di Luzio, M. (2020). Las barreras de las nuevas formas de validación de identidad. Collectedno- 
tes.com/DALAT. 
https://collectednotes.com/dalat/las-barreras-de-las-nuevas-formas-de-validacion-de-identi- 
dad 


Eh Universo. (2021, mayo 311). Cerraron las puertas de las residencias y ya, dentro, no pasaba 
nada. Twitter. 
https://twitter.com/ehuniverso/status/13993353494410895437?s=21 


Eh Universo. (2021, julio 08). ¿Prestas atención a tus hijos cuando estás con el móvil? Instagram. 
https: //www.instagram.com/tv/CREL5mvCICw/?utm_medium=copy_link 


Facebbok. (s. f.). ¿Cómo puedo usar un lector de pantalla para Instagram? Instagram, Help Cen- 
ter. 
https: //www.facebook.com/help/instagram/1178723545597542/?ref=share 


Facebook. (s. f.). Accesibilidad. Facebook Help Center. 
https: //www.facebook.com/help/accessibility 


Facebook. (s. f.). ¿Cómo edito el texto alternativo de una foto en Instagram? Instagram Help 
Center. 
https: //www.facebook.com/help/instagram/503708446705527?helpref=relatedérdrhc 


Facebook. (s. f.). ¿Cómo subo un video a IGTV en Instagram? Instagram help Center. 
https: //www.facebook.com/help/instagram/225190788256708/?ref=share 


Fisher, C. (2018, octubre 25). Diseño Contenido Accesible: Tipografía, Estilo de Fuente y Estruc- 
tura. tutsplus.com. 
https://webdesign.tutsplus.com/es/articles/designing-accessible-content-typogra- 
phy-font-styling-and-structure--cms-31934 


Fundación itgrarte. (2021, mayo 19). Accesibilidad Web: semántica HTML y fundamentos ARIA 
en UTN Rosario. Youtube. 
https: //www.youtube.com/watch?v=STev_xcKCpE 


Fundación Itgrarte. (2021, junio 02). Ejemplo de uso de roles y atributos WAI-ARIA estáticos. 
itgrarte.org. 

https: //www.itgrarte.org/accesibilidad/ejemplos-de-uso-de-roles-y-atributos-wai-aria-estati- 
cos/ 


MáÁc a1 onomía diaital v menos harrarac< 
las aultOnOI[Mia ACID ILc Y IT UNA lcd 


Fundación Karisma. (2021, marzo 19). “Más Autonomía Digital Menos Barreras” Postal Accesibi- 
lidad. Youtube. 
https: //www.youtube.com/watch?v=hEoiBCOhyC8 


GIPHY. (s. f.). GIF Creation Best Practices. GIPHY Support. 
https: //support.giphy.com/hc/en-us/articles/360019914771-GIF-Creation-Best-Practices 


GIPHY. (s. f.). How To Make A GIF. GIPHY Support. 
https: //support.giphy.com/hc/en-us/articles/360019674452-How-To-Make-A-GIF 


GIPHY. (s. f.). How to Tag Your Content. GIPHY Support. 
https://support.giphy.com/hc/en-us/articles/360026405951-Tagging-Best-Practices 


Google. (s. f.). Búsqueda como accesibilidad. Google Help Center. 
https://support.google.com/youtube/search?g=accesibilidadéfrom_promoted_search=true 


Heumann, J. (2016, octubre). Nuestra lucha por los derechos de las personas con discapacidad 
y por qué aún no hemos terminado. TED.com. 

https: //www.ted.com/talks/judith_heumann_our_fight_for_disability_rights_and_why_we_re 
not_done_yet 


Mabe, T. (2020, agosto 18). Alternative Text and Image Descriptions. Instagram. 
https: //www.instagram.com/p/CECsJsFjrT9/2utm_medium=copy_link 


Maciá Díez., C., € ¡DESWEB. (2018). Accesibilidad Web: Formularios. Youtube. 
https: //www.youtube.com/watch?v=yxDweVItGfQ 


Marquez, S. (2020, octubre 15). Colores Accesibles (Nivel A) y Daltonismo. 
https: //pipimarquez.medium.com. 
https: //pipimarquez.medium.com/colores-accesibles-nivel-a-y-daltonismo-769d4e8fbaab 


Marquez, S. (2021, abril 03). ¿Qué es el foco? Instagram. 
https: //www.instagram.com/p/CNOCZIrn6l0/?2utm_medium=copy_link 


Marquez, S. (2021, abril 08). Focus order. Instagram. 
https: //www.instagram.com/p/CNbb3BLAOJy/?utm_medium=copy_link 


Ministerio de Sanidad, Servicios Sociales e Igualdad. (2013, abril 12). Documento consolidado 
BOE-A-2013-12632. BOE.es. 
https://boe.es/buscar/act.php?id=BOE-A-2013-1263 


Natividad, R. (2020, septiembre 19). Crear un Menú de Navegación responsive con HTML, CSS y 
¡Query - Desarrollo Web. Youtube. 
https: //www.youtube.com/watch?v=JOKHulUiYzw 


Oficina para los Derechos Humanos de las Naciones Unidas. (2008). CONVENCIÓN SOBRE LOS 
DERECHOS DE LAS PERSONAS CON DISCAPACIDAD 
https: //www.ohchr.org/documents/publications/advocacytool_sp.paf 


Ok Chicas. (2021, mayo 24). ¿Cómo se le dice en su Pais. Facebook. Retrieved julio, 2021, from 
https: //www.facebook.com/watch/?v=774294609944569 


OMPI (Organización Mundial de la Propiedad Intelectual). (s. f.). ratado de Marrakech para faci- 


NS) 


litar el acceso a las obras publicadas a las personas ciegas, con discapacidad visual o con otras 
dificultades para acceder al texto impreso. wipo.int. 
https: //www.wipo.int/treaties/es/ip/marrakesh/index.html 


Revilla, O., € Carreras, O. (2018). ACCESIBILIDAD/Checklist (M. Casas, Compiler). 
https://drive.google.com/file/d/IKBVAN5NMhCpryuh2lbEx_ENEHXGoKXPQ/view 


Revilla Muñoz, O., 8 Carreras Montoto, O. (2018). Accesibilidad web. WCAG 2.1 de forma senci- 
lla”. (primera ed., Vol. 1). Itakora. 
https://olgacarreras.blogspot.com/2018/11/libro-accesibilidad-web-wcag-21-de.html 


RO, F. (2021, junio 25). Títulos de la página. Corporaciones sencillas: una primera revisión de la 
accesibilidad web. Instagram. 
https: //www.instagram.com/p/CQjGijPtqrw/?utm_medium=copy_link 


Roa, F. (2021, junio 30). Encabezados, comprobación sencilla: una primera revisión de de acce- 
sibilidad web. Instagram. 
https: //www.instagram.com/p/CQwKkovsxSY/?utm_medium=copy_link 


Saltolab Team 8 Marquez, S. (2021, enero 28). MEETUP saltolab - Encuentro O5. Accesibilidad 
en Redes Sociales. Youtube. 
https: //www.youtube.com/watch?v=GekWgPg5MqY 


Secretaría de Extensión Universitaria de la Universidad Tecnológica Nacional Facultad Regional 
Córdoba. (2020, noviembre 19). Introducción al código, qué necesitamos conocer para accesi- 
bilidad? Youtube. 

https: //www.youtube.com/watch?v=C51IZELfdOs 


Secretaría de Extensión Universitaria” de la Universidad Tecnológica Nacional Facultad Regional 
Córdoba. (2020, agosto 13). Características de sitios web accesible. 
https: //www.youtube.com/watch?v=i9BWRQHAIO 


Siteimprove € Carreras, O. (2020). Guía todo en uno sobre la accesibilidad web en España” (Pri- 
mera ed., Vol. 1). 
https://hello.siteimprove.com/guia-accesibilidad-web 


Tecnológico de Costa Rica, Escuela de ingeniería. (2020, abril 17). Generando documentos Ac- 
cesibles. Youtube. 
https: //www.youtube.com/watch?v=Cg4NVYmiVHg 


Torro, E. (2016, octubre 07). Accesibilidad y Menús. betabeers.com. 
https://betabeers.com/blog/accesibilidad-menus-247/ 


Twitter. (s. f.). Cómo cargar un archivo de subtítulos SRT en Media Studio. Twitter. 
https://help.twitter.com/es/search 


Twitter. (s. f.). Cómo publicar imágenes accesibles. Twitter Help Center. 
https://help.twitter.com/es/using-twitter/picture-descriptions 


W3Schools. (s. f.). Accessibility Tutorial. W3Schools. 
https: //www.w3schools.com/accessibility/index.php 


WC3-Consorcio world Wide Web. (s. f.). Inaccessibility of CAPTCHA. w3c.org. 
https: //www.w3.org/TR/turingtest/ 


WC3-Consorcio world Wide Web. (2014, septiembre). Forms Concepts. w3c.org. 
https: //www.w3.org/WAI/tutorials/forms/ 


WC3-Consorcio world Wide Web. (2014, septiembre). Images Concept. w3c.org. 
https: //www.w3.org/WAl/tutorials/images/ 


WC3-Consorcio world Wide Web. (2015, mayo). Menu Concepts. w3c.org. 
https: //www.w3.org/WAl/tutorials/menus/ 


WC3-Consorcio world Wide Web. (2017, diciembre 14). Accessible Rich Internet Applications (WAI- 
ARIA) 1.1. w3c.org. 
https: //www.w3.org/TR/wai-aria-1.1/ 


WC3-Consorcio world Wide Web. (2017, abril). Page Structure Concepts. W3C.org. 
https: //www.w3.org/WAl/tutorials/page-structure/ 


WC3-Consorcio world Wide Web. (2019, julio 11). Introduction to Web Accessibility. 
https: //www.w3.org. https://www.w3.org/WAl/fundamentals/accessibility-intro/ 


WC3-Consorcio world Wide Web. (2019, octubre 04). How to Meet WCAG (Quick Reference). w3c. 
org. 
https: //www.w3.org/WAI/WCAG21/quickref/ 


WC3-Consorcio world Wide Web. (2021, mayo). Carousel Concepts. w3c.org. 
https: //www.w3.org/WAI/tutorials/carousels/ 


Web Accessibility Awareness. (2020, septiembre 21). Accessible documents. Instagram. 
https: //www.instagram.com/p/CFY7GafolzM/ 


Women Who Code. (2021, febrerO 25). Principios de Accesibilidad Web para Front End. Youtube. 
https: //www.youtube.com/watch?v=W3DHYpjPafo 





Fundación 


Karisma 


Más autonomía digital 
y menos barreras: 


Guía básica de accesibilidad 
web Fundación Karisma 











